<template>
  <el-form-item :label="props.item.label">
    <template v-if="props.item.type == 'input'">
      <el-input v-model="model as string" :placeholder="props.item.placeholder" />
    </template>
    <template v-else-if="props.item.type == 'select'">
      <el-select v-model="model as string" :placeholder="props.item.placeholder">
        <template v-for="(opt, index) in props.item.options" :key="index">
          <el-option :label="opt.label" :value="opt.value" />
        </template>
      </el-select>
    </template>
  </el-form-item>
</template>
<script setup lang="ts">
import { computed } from 'vue'
import type { IFormItem } from '../types/index'

const props = defineProps<{
  modelValue?: string | number | boolean | Date | object
  item: IFormItem
}>()

const emits = defineEmits(['update:modelValue'])
const model = computed({
  get: () => {
    return props.modelValue ?? ''
  },
  set: (val) => {
    emits('update:modelValue', val)
  },
})
</script>
